<template>
	<div>
		<div class="remotelinktop">
			<img src="../../static/image/closepdf.png" class="closelinkimg" @click="closeremotelink()" />
		</div>
		<div class="scroll-wrapper" v-if="!isPdf">
			<div v-if="loading"><img class="loading" src="../../static/image/loading.gif"/></div>
			<iframe ref="iframe" allowTransparency="true" id="remotelink" class="iframelink" width="100%" height="100%" :src="remotelinkurl"></iframe>
		</div>
		<div class="pdffile" :height="screenHeight" v-else>
			<iframe :src="remotelinkurl" class="pdffile" :height="screenHeight"> </iframe>
		</div>
	</div>
</template>

<script>
export default {
	name: 'RemoteLink',
	props: {
		responseViewResource: {
			type: Function,
			default: null
		},
		remotelinkurl: {
			type: String,
			required: true,
			default: () => ''
		},
		//IM聊天框pdf
		isPdf: {
			type: Boolean,
			default: () => false
		},
		cmdId: {
			type: Number,
			default: () => 0
		},
		clientId: {
			type: String,
			default: () => ''
		},
		//业务指令pdf
		isPdfBusiness: {
			type: Boolean,
			default: () => false
		},
		loading: {
			type: Boolean,
			default: () => false
		}
	},
	data() {
		return {
			screenHeight: window.innerHeight
		};
	},
	mounted() {},
	methods: {
		closeremotelink() {
			this.$emit('closeremotelink');
		}
	}
};
</script>

<style scoped>
.loading {
	width: 100px;
	position: absolute;
	top: 40%;
	left: 35%;
}

.remotelinktop {
	width: 100%;
	background-color: rgba(100, 202, 171, 1);
	height: 50px;
	position: absolute;
	left: 0;
	top: 0;
}

.closelinkimg {
	width: 30px;
	height: 30px;
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 10000;
}

.iframelink {
	background: white;
	border: 0px;
	/*margin-top: 50px;*/
}

.scroll-wrapper {
	-webkit-overflow-scrolling: touch;
	overflow-y: scroll;
	width: 100%;
	height: 99%;
	padding-top: 50px;
	/* 提示: 请在此处加上需要设置的大小(dimensions)或位置(positioning)信息! */
}
.pdffile {
	width: 100%;
	/*height:600px;*/
	position: absolute;
	left: 0;
	top: 0px;
	z-index: 7;
}
</style>
